<template>
  <div class="container" style="height: 100%">
    <el-form class="query-form query-form-2" :model="formQuery">
      <el-row>
        <el-col :span="4">
          <el-form-item>
            <el-select clearable v-model="formQuery.tenantType" placeholder="租户类型">
              <el-option label="个人" value="0"></el-option>
              <el-option label="企业" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select @change="buildingChange" clearable v-model="formQuery.fkBuildingId" placeholder="所在楼宇">
              <el-option v-for="item in building" :label="item.buildingName" :value="item.pkBuildingId"
                :key="item.pkBuildingId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select clearable v-model="formQuery.houseNumber" placeholder="房间号">
              <el-option v-for="item in roomData" :label="item.houseNumber" :key="item.houseNumber" :value="item.houseNumber"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.inputString" placeholder="承租人" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button @click="query">查询</el-button>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4">
          <el-form-item style="position: absolute; right: 0.2rem">
            <el-button type="info" @click="deleteById">删除</el-button>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.contactPhone" placeholder="联系电话（手机）" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.idcardNumber" placeholder="身份证号/营业执照编号" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable v-model="formQuery.contractNumber" placeholder="房源资产编码" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="div-table" style="padding:0 20px;">
        <el-scrollbar style="height:100%;">
            <el-table ref="table" class="roomTable" :data="tableData" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号"  width="70">
            </el-table-column>
            <el-table-column prop="tenantName" label="承租人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tenantType" label="租户类型">
                <template slot-scope="scope">
                {{ scope.row.tenantType == 0 ? "个人" : "企业" }}
                </template>
            </el-table-column>
            <el-table-column prop="buildingName" label="所在楼宇" show-overflow-tooltip></el-table-column>
            <el-table-column prop="houseNumber" label="房间号"></el-table-column>
            <el-table-column prop="contactPhone" label="手机号"></el-table-column>
            <el-table-column prop="payment" label="缴费情况">
                <template slot-scope="{row}">
                {{row.payment | paymentFilter}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="createdBy" label="出租人"></el-table-column> -->
            <el-table-column prop="contractState" label="合同状态">
                <template slot-scope="{row}">
                {{row.contractState | contractFilter}}
                </template>
            </el-table-column>
            <el-table-column prop="contractNumber" label="合同编号" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                <router-link class="el-link el-link--primary"
                    :to="{ path: `/tenant/edit/` + (row.tenantType == 0 ? 'personal' : 'enterprise') + '/' + row.pkTenantId }">
                    编辑 </router-link>
                </template>
            </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
    <div class="page-div-placeholder"></div>
    <div class="page-div" style="background: #fff">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
        :total="pageObj.total" @current-change="currentPageChange" @size-change="sizeChange"
        :page-sizes='pageObj.pageSizes'></el-pagination>
    </div>
  </div>
</template>

<script>
  import { listMixin } from "@/mixin";
  import { Loading } from "element-ui";
  import editView from "@/view/operations/contract/edit";
  import { getBuildingName, getAllAreaNumber } from "@/api/house/building/building";
  import {
    getAllTenant,
    deleteTenant,
    getAllTenantByCondition,
  } from "@/api/operations/tenant/tenant";
  export default {
    mixins: [listMixin],
    components: {
      editView,
    },
    computed: {},
    data() {
      return {
        formQuery: {},
        building: [],
        provinces: [],
        citys: [],
        areas: [],
        tableData: [],
        roomData: []
      };
    },
    methods: {
      loadData() {
        if (this.where != null) {
          return getAllTenantByCondition(this.where).then((res) => {
            let { total, data } = res;
            this.pageObj.total = total;
            this.tableData = data;
          });
        } else {
          return getAllTenant(this.pageObj).then((res) => {
            let { total, data } = res;
            this.pageObj.total = total;
            this.tableData = data;
          });
        }
      },
      loadSelect() {
        getBuildingName().then((res) => {
          this.building = res.data;
        });
      },
      deleteById() {
        let tableData = this.$refs["table"].selection;
        let tenantIds = "";
        tableData.forEach((v, i) => {
          tenantIds += v.pkTenantId + ",";
        });
        if (!tenantIds) {
          this.$message.warning("请选择要删除的租户");
          return;
        }
        this.$confirm("确定删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          deleteTenant(tenantIds).then((res) => {
            if (res.code === 10000) {
              this.$message.success(res.msg);
              this.loadDataProxy();
            }
          });
        });
      },
      tableRowClassName(row, rowIndex) {
        row = row.row;
        if (row.status === "0") {
          return "warning-row";
        } else {
          return "";
        }
      },
      buildingChange() {
        if (this.formQuery.fkBuildingId) {
          getAllAreaNumber(this.formQuery.fkBuildingId).then(res => {
            this.roomData = res.data.roomList;
          });
        }else{
          this.roomData = [];
        }
      }
    },
    mounted() {
      this.loadDataProxy();
      this.loadSelect();
    },
  };
</script>
<style scoped>
.div-table{
      height: calc(100% - 85px - 40px - 15px);
}
</style>